<template>
    <div id="SchoolManage">
        <el-row  style="margin-bottom: 20px;">
            <el-col :span="4">
                <el-button type="primary" @click="dialogVisible = true,isUpdateSchoolInfo=false,school={}">新增学校</el-button>
            </el-col>
        </el-row>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>渠道名称</td>
                    <td>校园地址</td>
                    <td>提成金额</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(item,key) in dataSource" :key="key">
                    <td>{{item.schoolName}}</td>
                    <td>{{item.address}}</td>
                    <td>{{item.fee}}</td>
                    <td>{{item.remark}}</td>
                    <td>
                        <el-button
                        size="mini"
                        @click="handleEdit(key,item)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="success"
                        @click="showContacts(key,item)">查看联系人</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(key,item)">删除</el-button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 新增学校 -->
        <el-dialog 
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
        >
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td>渠道名称</td>
                        <td>
                            <el-input v-model="school.schoolName"></el-input>
                        </td>
                        <td>校园地址</td>
                        <td>
                            <el-input v-model="school.address"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>提成金额</td>
                        <td>
                            <el-input v-model="school.fee"></el-input>
                        </td>
                          <td>备注</td>
                        <td colspan="3">
                            <el-input v-model="school.remark" ></el-input>
                        </td>
                    </tr>
                </tbody>
            </table>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewSchool" v-if="!isUpdateSchoolInfo">确 定</el-button>
                <el-button type="primary" @click="updateSchoolInfo" v-if="isUpdateSchoolInfo">更新</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="showContactsView"
            :before-close="handleClose" 
            width="50%"       
        >
         <el-row  style="margin-bottom: 20px;">
            <el-col :span="4">
                <el-button type="primary" @click="showAddNewContactView">新增联系人</el-button>
            </el-col>
        </el-row>
            <el-table :data="contactsSource" border style="width:100%">
                <el-table-column prop="contactName" label="联系人姓名"></el-table-column>
                <el-table-column prop="mobile" label="联系电话"></el-table-column>
                <el-table-column prop="post" label="职务"></el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        @click="showUpdate(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="deleteContact(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>       
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 新增联系人 -->
        <el-dialog 
            title="新增联系人"
            :visible.sync="showAddNewContact"
            width="30%"
            :before-close="handleClose"
        >
            <table class="table contactTable">
                <tbody>
                    <tr>
                        <td>联系人姓名
                        </td>
                        <td>
                            <!-- <el-input v-model="form.contactName" style="width:70%"></el-input> -->
                            <input name="联系人姓名" v-model="form.contactName" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('联系人姓名') }" type="text" placeholder="联系人姓名" style="width:70%">
                            <i v-show="errors.has('联系人姓名')" class="fa fa-warning"></i>
                            <span v-show="errors.has('联系人姓名')" class="help is-danger">{{ errors.first('联系人姓名') }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>联系电话
                        </td>
                        <td>
                            <!-- <el-input v-model="form.mobile" style="width:70%"></el-input> -->
                            <p class="control has-icon has-icon-right">
                                <input name="手机号" v-model="form.mobile" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('手机号') }" type="text" placeholder="手机号" style="width:70%">
                                <i v-show="errors.has('手机号')" class="fa fa-warning"></i>
                                <span v-show="errors.has('手机号')" class="help is-danger">{{ errors.first('手机号') }}</span>
                            </p>
                        </td>
                    </tr>
                     <tr>
                        <td>职务
                        </td>
                        <td>
                            <!-- <el-input v-model="form.post" style="width:70%"></el-input> -->
                            <input name="职务" v-model="form.post" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('职务') }" type="text" placeholder="职务" style="width:70%">
                            <i v-show="errors.has('职务')" class="fa fa-warning"></i>
                            <span v-show="errors.has('职务')" class="help is-danger">{{ errors.first('职务') }}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
             <span slot="footer" class="dialog-footer">
                <el-button @click="showAddNewContact= false">取 消</el-button>
                <el-button type="primary" @click="addNewContact" v-if="!isUpdate">提交</el-button>
                <el-button type="primary" @click="updateContactInfo" v-if="isUpdate">更新</el-button>
            </span>
        </el-dialog>
          <el-pagination
                background
                layout="prev, pager, next"
                :total="totalRecord"
                @current-change="currentChange">
        </el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return {
            dataSource: [],
            dialogVisible: false,
            school: {},
            showContactsView: false,
            showAddNewContact: false, //显示新增联系人弹框
            contactsSource: [], //根据选择,显示每个联系人列表
            form: {},
            schoolId: '',
            isUpdate: false,
            isUpdateSchoolInfo: false,
            schoolInfo: {},
            totalRecord: 1,//总页数
        }
    },
    methods: {
        handleDelete(index,row){
            // /backstage/school/delete
             this.$confirm('此操作将永久删除该校园, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                 var deleteURL = window.baseURL+ "/backstage/school/delete";
                var postData = {id: row.id,token: this.$token};
                this.$http.post(deleteURL,this.$qs.stringify(postData))
                .then((response)=>{
                     this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.loadData();
                })
                .catch((error)=>{
                    console.log(error);
                })
               
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //显示更新页面
        showUpdate(index,row){
            this.form = row;
            this.isUpdate = true;
            this.showAddNewContact = true;
            this.isUpdateSchoolInfo = true;

        },
        //更新学校信息
        updateSchoolInfo(){
            this.dialogVisible = false;
            var insertURL = window.baseURL + "/backstage/school/update";
            this.school.token = this.$token;
            this.$http.post(insertURL,this.$qs.stringify(this.school))
            .then((response)=>{
                this.loadData(1);
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        //发起更新请求
        updateContactInfo(){
            var checkedDdataArra = ["contactName","mobile","post"];
            var goon = this.checkData(checkedDdataArra,this.form);
            if(!goon){
                return;
            }
            // /backstage/contact/update
            var updateURL = window.baseURL + "/backstage/contact/update";
            this.form.token = this.$token;
            // 648941a25c7543c09459be8ae60670eb
            // 648941a25c7543c09459be8ae60670eb
            this.form.schoolId = this.schoolId;
            this.$http.post(updateURL,this.$qs.stringify(this.form))
            .then((response)=>{
                this.showAddNewContact = false;
                this.isUpdate = false;
                this.form = {}
                this.loadSchoolContact(this.schoolId);
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        showAddNewContactView(){
            this.showAddNewContact = true;
        },
        // 删除联系人
        deleteContact(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var url = window.baseURL+"/backstage/contact/delete";
                this.$http.post(url,this.$qs.stringify({id:row.id,token:this.$token}))
                .then((response)=>{
                    this.contactsSource.splice(index,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                    });
                })
                .catch((error)=>{
                })
               
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        currentChange(value){
            this.loadData(value);
        },
        addNewContact(){
            // this.showAddNewContactView = true;
            // 判断输入的内容是否为空,如果为空则不允许提交
            var checkedDdataArra = ["contactName","mobile","post"];

            var goon = this.checkData(checkedDdataArra,this.form);
            if(!goon){
                return;
            }
            var insertURL = window.baseURL + "/backstage/contact/insert";
            this.form.token = this.$token;
            this.form.schoolId = this.schoolId;
            this.$http.post(insertURL,this.$qs.stringify(this.form))
            .then((response)=>{
                this.showAddNewContact = false;
                this.loadSchoolContact(this.schoolId);
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        //编辑学校信息
        handleEdit(index,row){
            this.isUpdateSchoolInfo = true;
            this.dialogVisible = true;
            this.school = row;
        },
        // 查看联系人,根据校园查看联系人列表
        showContacts(key,item){
            this.schoolId = item.id;
            this.contactsSource = item.contacts;
            this.showContactsView = true;
    
        },
        handleClose(){
            this.dialogVisible = false;
            // 由于是两层弹框,现根据最上层弹框的状态,来决定下一层弹框的状态
            //顶层弹框为true,则先隐藏顶层弹框,次层弹框不变
            //顶层弹框为false,则次层弹框隐藏
            if(this.showAddNewContact == true){
                this.showAddNewContact = false;
                this.showContactsView = true;
            }else{
                this.showContactsView = false;
            }
        },
        //根据ID查询学校的联系人列表
        loadSchoolContact(schoolId){
            var shoolInfo = {}
            // /backstage/contact/find
            var url = window.baseURL + "/backstage/school/find?token="+this.$token+"&id="+schoolId;
            this.$http.get(url)
            .then((response)=>{
                this.contactsSource = response.data.data.contacts;
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        addNewSchool(){
            //新增校园 /backstage/school/insert
            this.dialogVisible = false;
            var insertURL = window.baseURL + "/backstage/school/insert";
            this.school.token = this.$token;
            this.$http.post(insertURL,this.$qs.stringify(this.school))
            .then((response)=>{
                this.loadData(1);
            })
            .catch((error)=>{
                console.log(error);
            })
        },
        loadData(pageNum){
               //url  /backstage/classStudent/findByPage
                var studentURL = window.baseURL+"/backstage/school/findByPage?token="+this.$token+"&pageNum="+pageNum+"&pageSize=20";
                this.$http.get(studentURL)
                .then((response)=>{
                    this.dataSource = response.data.data.list.results;
                    this.totalRecord = response.data.data.list.totalRecord;
                })
                .catch((error)=>{
                    console.log(error);
                })
        }
    },
    created(){
        this.loadData(1);
    }
}
</script>

<style lang="scss" scoped>
    #SchoolManage {
        width: 100%;
        padding: 40px;
        box-sizing: border-box;  
        position: absolute;   
        .table {
            tr {
                td {
                        text-align: center;
                        vertical-align: middle;
                }
            }
        }
        .contactTable {
            tbody {
                tr {
                    td {
                        border: none;
                        &:nth-child(2n){
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
</style>
